<script setup>
import { BaseEdge, getSmoothStepPath, useVueFlow } from '@vue-flow/core'
import { computed, watch } from 'vue'

const props = defineProps({
    id: {
        type: String,
        required: true
    },
    sourceX: {
        type: Number,
        required: true
    },
    sourceY: {
        type: Number,
        required: true
    },
    targetX: {
        type: Number,
        required: true
    },
    targetY: {
        type: Number,
        required: true
    },
    sourcePosition: {
        type: String,
        required: true
    },
    targetPosition: {
        type: String,
        required: true
    },
    source: {
        type: String,
        required: true
    },
    target: {
        type: String,
        required: true
    },
    data: {
        type: Object,
        required: false
    },
    stroke: {
        type: String,
        required: false,
        default: '#2694ff' // 默认颜色
    }
})

const { findNode } = useVueFlow()

const path = computed(() => getSmoothStepPath(props))

const markerId = computed(() => `${props.id}-marker`)
watch(
    () => props,
    () => {
        console.log(props)
    },
    {
        deep: true
    }
)
</script>

<script>
export default {
    inheritAttrs: false
}
</script>

<template>
    <BaseEdge
        :id="id"
        :path="path[0]"
        :marker-end="`url(#${markerId})`"
        :label-x="path[1]"
        :label-y="path[2]"
        label-bg-style="fill: whitesmoke"
        :style="{ stroke: stroke }"
    />
    dasdadsad
</template>
